<template>
	<div
		v-if="prop.node.type == 'start round mix'"
		:id="prop.node.id"
		class="common-circle-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			cursor:
				prop.currentTool.type == 'drag'
					? 'move'
					: prop.currentTool.type == 'connection'
					? 'crosshair'
					: prop.currentTool.type == 'zoom-in'
					? 'zoom-in'
					: prop.currentTool.type == 'zoom-out'
					? 'zoom-out'
					: 'default',
			background: that.verificationStyle[!!prop.activityId ? '1' : '4'],
		}"
		@click.stop="selectNode"
		@contextmenu.stop="showNodeContextMenu"
	>
		<!-- <a-icon type="play-circle" /> -->
		{{ prop.node.name }}
	</div>

	<div
		v-else-if="prop.node.type == 'end round'"
		:id="prop.node.id"
		class="common-circle-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			cursor:
				prop.currentTool.type == 'drag'
					? 'move'
					: prop.currentTool.type == 'connection'
					? 'crosshair'
					: prop.currentTool.type == 'zoom-in'
					? 'zoom-in'
					: prop.currentTool.type == 'zoom-out'
					? 'zoom-out'
					: 'default',
			background: that.verificationStyle[!!prop.activityId && prop.activityId == prop.node.id ? '0' : !!prop.node.setInfo && !!prop.node.setInfo.Taged ? prop.node.setInfo.Taged.toString() : '4'],
		}"
		@click.stop="selectNode"
		@contextmenu.stop="showNodeContextMenu"
	>
		<!-- <a-icon type="close-circle" /> -->
		{{ prop.node.name }}
	</div>

	<div
		v-else-if="prop.node.type == 'node'"
		:id="prop.node.id"
		class="common-rectangle-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			cursor:
				prop.currentTool.type == 'drag'
					? 'move'
					: prop.currentTool.type == 'connection'
					? 'crosshair'
					: prop.currentTool.type == 'zoom-in'
					? 'zoom-in'
					: prop.currentTool.type == 'zoom-out'
					? 'zoom-out'
					: 'default',
			background: that.verificationStyle[!!prop.activityId && prop.activityId == prop.node.id ? '0' : !!prop.node.setInfo && !!prop.node.setInfo.Taged ? prop.node.setInfo.Taged.toString() : '4'],
		}"
		@click.stop="selectNode"
		@contextmenu.stop="showNodeContextMenu"
	>
		<!-- <a-icon type="setting" /> -->
		{{ prop.node.name }}
	</div>

	<div
		v-else-if="prop.node.type == 'fork'"
		:id="prop.node.id"
		class="common-rectangle-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			cursor:
				prop.currentTool.type == 'drag'
					? 'move'
					: prop.currentTool.type == 'connection'
					? 'crosshair'
					: prop.currentTool.type == 'zoom-in'
					? 'zoom-in'
					: prop.currentTool.type == 'zoom-out'
					? 'zoom-out'
					: 'default',
			background: that.verificationStyle[!!prop.activityId && prop.activityId == prop.node.id ? '0' : !!prop.node.setInfo && !!prop.node.setInfo.Taged ? prop.node.setInfo.Taged.toString() : '4'],
		}"
		@click.stop="selectNode"
		@contextmenu.stop="showNodeContextMenu"
	>
		<!-- <a-icon type="fullscreen" /> -->
		{{ prop.node.name }}
	</div>

	<div
		v-else-if="prop.node.type == 'join'"
		:id="prop.node.id"
		class="common-rectangle-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			cursor:
				prop.currentTool.type == 'drag'
					? 'move'
					: prop.currentTool.type == 'connection'
					? 'crosshair'
					: prop.currentTool.type == 'zoom-in'
					? 'zoom-in'
					: prop.currentTool.type == 'zoom-out'
					? 'zoom-out'
					: 'default',
			background: that.verificationStyle[!!prop.activityId && prop.activityId == prop.node.id ? '0' : !!prop.node.setInfo && !!prop.node.setInfo.Taged ? prop.node.setInfo.Taged.toString() : '4'],
		}"
		@click.stop="selectNode"
		@contextmenu.stop="showNodeContextMenu"
	>
		<!-- <a-icon type="fullscreen-exit" /> -->
		{{ prop.node.name }}
	</div>

	<div
		v-else-if="prop.node.type == 'x-lane'"
		:id="prop.node.id"
		class="common-x-lane-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			height: prop.node.height + 'px',
			width: prop.node.width + 'px',
			cursor: prop.currentTool.type == 'zoom-in' ? 'zoom-in' : prop.currentTool.type == 'zoom-out' ? 'zoom-out' : 'default',
		}"
	>
		<div class="lane-text-div" :style="{ cursor: currentTool.type == 'drag' ? 'move' : 'default' }" @click.stop="selectNode" @contextmenu.stop="showNodeContextMenu">
			<span class="lane-text">{{ node.name }}</span>
		</div>
	</div>

	<div
		v-else-if="prop.node.type == 'y-lane'"
		:id="prop.node.id"
		class="common-y-lane-node"
		:class="{ active: isActive() }"
		:style="{
			top: prop.node.y + 'px',
			left: prop.node.x + 'px',
			height: prop.node.height + 'px',
			width: prop.node.width + 'px',
			cursor: prop.currentTool.type == 'zoom-in' ? 'zoom-in' : prop.currentTool.type == 'zoom-out' ? 'zoom-out' : 'default',
		}"
	>
		<div class="lane-text-div" :style="{ cursor: prop.currentTool.type == 'drag' ? 'move' : 'default' }" @click.stop="selectNode" @contextmenu.stop="showNodeContextMenu">
			<span class="lane-text">{{ prop.node.name }}</span>
		</div>
	</div>
	<div v-else></div>
</template>

<script setup>
import { reactive, ref, computed, watch, onMounted, onBeforeUnmount, defineEmits, defineProps, nextTick } from 'vue';
import $ from 'jquery';
import jsplumb from 'jsplumb';
import { flowConfig } from '../config/args-config.js';

const prop = defineProps({
	selectGroup: {
		type: Array,
		default: () => [],
	},
	select: {
		type: Object,
		default: () => ({}),
	},
	node: {
		type: Object,
		default: () => ({}),
	},
	plumb: {
		type: Function,
		default: function () {},
	},
	activityId: {
		type: Object,
		default: () => ({}),
	},
	currentTool: {
		type: Object,
		default: () => ({}),
	},
	thatNeedShow: {
		type: Boolean,
		default: false,
	},
});
const that = reactive({
	currentSelect: prop.select,
	currentSelectGroup: prop.selectGroup,
	verificationStyle: flowConfig.verificationStyle,
	node: prop.node,
});

const registerNode = () => {
	// nextTick(() => {
	prop.plumb.draggable(prop.node.id, {
		containment: 'parent',
		handle: function (e, el) {
			var possibles = el.parentNode.querySelectorAll('.common-circle-node,.common-rectangle-node,.common-diamond-node,.lane-text-div');
			for (var i = 0; i < possibles.length; i++) {
				if (prop.thatNeedShow === false) return false;
				if (possibles[i] === el || e.target.className == 'lane-text') return true;
			}
			return false;
		},
		grid: flowConfig.defaultStyle.alignGridPX,
		drag: function (e) {
			if (flowConfig.defaultStyle.isOpenAuxiliaryLine) {
				emits('alignForLine', e);
			}
		},
		stop: function (e) {
			that.node.x = e.pos[0];
			that.node.y = e.pos[1];
			if (that.currentSelectGroup.length > 1) {
				emits('updateNodePos');
			}
			emits('hideAlignLine');
		},
	});

	if (prop.node.type == 'x-lane' || prop.node.type == 'y-lane') {
		$('#' + prop.node.id).resizable({
			minHeight: 200,
			minWidth: 200,
			maxHeight: 2000,
			maxWidth: 2000,
			stop: function (event, ui) {
				that.node.height = ui.size.height;
				that.node.width = ui.size.width;
			},
		});
	}
	that.currentSelect = prop.node;
	that.currentSelectGroup = [];
	// });
};

const selectNode = () => {
	that.currentSelect = prop.node;
	emits('isMultiple', (flag) => {
		if (!flag) {
			that.currentSelectGroup = [];
		} else {
			let f = that.currentSelectGroup.filter((s) => s.id == prop.node.id);
			if (f.length <= 0) {
				prop.plumb.addToDragSelection(prop.node.id);
				that.currentSelectGroup.push(prop.node);
			}
		}
	});
};
const showNodeContextMenu = (e) => {
	emits('showNodeContextMenu', e);
	selectNode();
};

const isActive = () => {
	if (that.currentSelect.id == prop.node.id) return true;
	let f = that.currentSelectGroup.filter((n) => n.id == prop.node.id);
	if (f.length > 0) return true;
	return false;
};

const emits = defineEmits(['updateSelect', 'updateSelectGroup', 'showNodeContextMenu', 'alignForLine', 'hideAlignLine', 'updateNodePos', 'isMultiple']);

watch(
	() => prop.select,
	(newVal) => {
		that.currentSelect = newVal;
	}
);

watch(
	() => that.currentSelect,
	(newVal) => {
		emits('updateSelect', newVal);
	},
	{ deep: true }
);
watch(
	() => prop.selectGroup,
	(newVal) => {
		that.currentSelectGroup = newVal;
	}
);
watch(
	() => that.currentSelectGroup,
	(newVal) => {
		emits('update:selectGroup', newVal);
	}
);

onMounted(() => {
	registerNode();
});
</script>

<style lang="scss" scoped>
@import '../style/flow-node.scss';
</style>
